import { QuestionCircleOutlined } from '@ant-design/icons';
import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Access } from '@umijs/max';
import { Button, Popconfirm } from 'antd';
import { useRef, useState } from 'react';
import RoleForm, { RoleType } from './components/roleForm';
import RoleResourceForm from './components/roleResourceForm';
import { useAccess } from '@umijs/max';
import { deleteRole, queryRoleList } from '@/services/system/SystemController';

const HomePage: React.FC = () => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();
  const [data, setData] = useState<null | RoleType | 0>(null);
  const [updateResource, setUpdateResource] = useState<RoleType | null>(null);
  const columns: ProColumns<RoleType>[] = [
    { title: '角色名称', dataIndex: 'name' },
    { title: '权限字符', dataIndex: 'key' },
    {
      title: '数据权限', dataIndex: 'data_scope', search: false, responsive: ['md'],
      valueEnum: {
        1: { text: '所有数据' },
        3: { text: '本部门及以下数据' },
        4: { text: '本部门数据' },
        5: { text: '仅本人数据' },
      },
    },
    { title: '角色描述', dataIndex: 'description', ellipsis: true, search: false, responsive: ['md'], },
    {
      title: '角色状态',
      dataIndex: 'status',
      width: "20%",
      valueType: "select",
      valueEnum: {
        true: { text: '启用', status: 'Success' },
        false: { text: '停用', status: 'Error' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: "20%",
      render: (_, record) => (
        <>
          <Button size="small" type="link" onClick={() => setData(record)} > 修改 </Button>
          <Button size="small" type="link" onClick={() => setUpdateResource(record)}>资源</Button>
          <Access accessible={access.system.role.delete}>
            <Popconfirm title="确定删除?" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
              onConfirm={async () => {
                await deleteRole(record.id); actionRef.current?.reload();
              }}>
              <Button size="small" type="text" danger>删除</Button>
            </Popconfirm>
          </Access>
        </>
      ),
    },
  ];
  return (
    <PageContainer ghost breadcrumbRender={false} header={{ extra: <Button type="primary" onClick={() => setData(0)} key={0} title='新增'>新增</Button> }}>
      <ProTable
        actionRef={actionRef}
        search={{ filterType: "light" }}
        rowKey="id"
        columns={columns}
        options={{ density: false, setting: false }}
        request={(q) => queryRoleList(q)}
        pagination={{ defaultPageSize: 15, showSizeChanger: true, pageSizeOptions: [10, 15, 20, 25, 30, 50] }}
      />
      <RoleForm
        data={data}
        onClose={() => {
          setData(null);
        }}
        onFinish={() => {
          setData(null);
          actionRef.current?.reload();
        }}
      />
      <RoleResourceForm
        data={updateResource}
        onClose={() => {
          setUpdateResource(null);
        }}
        onFinish={() => {
          setUpdateResource(null);
          actionRef.current?.reload();
        }}
      />
    </PageContainer>
  );
};

export default HomePage;
